<template>
	<view>
		<ttBar leftIcon="icon-back" title="订单管理"></ttBar>
		<scroll-view  scroll-x="true" class="tabBar">
			<view class="tabList">
				<text class="tabItem" :class="[orderShow==0?'active':'']" :data-type="0"  @tap="toggleSc">全部</text>
				<text class="tabItem" :class="[orderShow==20?'active':'']" :data-type="20"  @tap="toggleSc">待付款</text>
				<!-- <text class="tabItem" :class="[orderShow==4?'active':'']" :data-type="4"  @tap="toggleSc">待体验</text> -->
				<text class="tabItem" :class="[orderShow==5?'active':'']" :data-type="5"  @tap="toggleSc">待开课</text>
				<text class="tabItem" :class="[orderShow==10?'active':'']" :data-type="10"  @tap="toggleSc">已开课</text>
				<!-- <text class="tabItem" >待评价</text> -->
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="" :style="{'height':scHeight+'px'}" @scrolltolower="pushData">
			<view class="orderList" v-if="orderData.length>0">
				<block v-for="(item,index) in orderData" :key="index">
					<!-- 1待支付预约款 2待支付尾款 3待支付全款 -->
					<prepayItem v-if="item.status==1||item.status==2||item.status==3" :orderItem="item"></prepayItem>
					 <!-- 4待开课 -->
					<preOpenItem v-else-if="item.status==4" :orderItem="item"></preOpenItem>
					<!-- 5已开课 -->
					<opend v-else-if="item.status==5" :orderItem="item"></opend>
					<!-- 6申请退款中 7已退款 -->
					<refoundItem v-else-if="item.status==6 || item.status==7" :orderItem="item"></refoundItem>
					<!-- 8已关闭 -->
					<closeItem v-else-if="item.status==8" :orderItem="item"></closeItem>
					<!-- 9 已完成 -->
					<sucessItem v-else-if="item.status==9" :orderItem="item"></sucessItem>					
				</block>
			</view>
			<emptyBox v-if="orderData.length<1" type="order"></emptyBox>
		</scroll-view>
		
		<hk-modal ref="hkModal"></hk-modal>
	</view>
</template>

<script>
	import closeItem from "@/pagesA/components/orderItem/closeItem.vue";
	import preExpItem from "@/pagesA/components/orderItem/preExpItem.vue";
	import preOpenItem from "@/pagesA/components/orderItem/preOpenItem.vue";
	import opend from "@/pagesA/components/orderItem/opend.vue";
	import prepayItem from "@/pagesA/components/orderItem/prepayItem.vue";
	import refoundItem from "@/pagesA/components/orderItem/refoundItem.vue";
	import sucessItem from "@/pagesA/components/orderItem/sucessItem.vue";
	import ttBar from "@/components/ttBar/ttBar.vue";
	import emptyBox from "@/components/emptyBox/emptyBox.vue";
	import API from "@/common/api.js";
	import {mapState} from "vuex";
	export default {
		components: {
			ttBar,
			emptyBox,
			closeItem,
			preExpItem,
			preOpenItem,
			prepayItem,
			refoundItem,
			sucessItem,
			opend
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
			})
			
		},
		data() {
			return {
				orderShow:0,
				isPayment:true,
				scHeight:uni.getSystemInfoSync().screenHeight-uni.getSystemInfoSync().statusBarHeight-(uni.upx2px(90)*2),
				orderData:[],
				hasNext:false,
				nextPage:1,
				tongji:[]
			};
		},
		methods:{
			getData(data){
				this.$store.dispatch("apiGetOrderList",data)
				.then(res=>{
					console.log(res)
					this.orderData=res.data.data.items
					this.hasNext=res.data.data.hasNext,
					this.nextPage=res.data.data.nextPage
				})
			},
			toggleSc(e){
				let _status=e.currentTarget.dataset.type
				this.orderShow=parseInt(e.currentTarget.dataset.type);
				this.getData({
					userId:this.userInfo.userId,
					status:this.orderShow,
					page_no:1,
					page_size:10
				})
			},
			pushData(){
				if(this.hasNext){
					this.$store.dispatch("apiGetOrderList",{
						userId:this.userInfo.userId,
						status:this.orderShow,
						page_no:this.nextPage,
						page_size:10
					})
					.then(res=>{
						
						this.orderData=this.orderData.concat(res.data.data.items)
						this.hasNext=res.data.data.hasNext
						this.nextPage=res.data.data.nextPage
					})
					
				}else{
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					});
				}
			}
		},
		onLoad(cfm) {
			let _this=this;
			if(cfm.status){
				this.orderShow=parseInt(cfm.status) 
			}
			_this.getData({
				userId:this.userInfo.userId,
				status:this.orderShow,
				page_no:1,
				page_size:10
			});
			uni.$on("shuxingOrder",()=>{
				_this.getData({
					userId:this.userInfo.userId,
					status:this.orderShow,
					page_no:1,
					page_size:10
				});
			})
			uni.$on("showDelModal",payload=>{
				if(payload.orderStatus==1||payload.orderStatus==3){
					this.$refs.hkModal.init({
						title:'支付错误',
						cntText:'该课程已删除，无法购买',
						cancle:'',
						confirm:'确认',
						maskClose:true,
						cancleFcn:null,
						confirmFcn:null,
					})
					this.$refs.hkModal.show()
				}else{
					this.$refs.hkModal.init({
						title:'支付错误',
						cntText:'该课程已删除，无法购买，请申请退款',
						cancle:'',
						confirm:'确认',
						maskClose:true,
						cancleFcn:null,
						confirmFcn:null,
					})
					this.$refs.hkModal.show()
				}
				
			});
			uni.$on("showDonModal",payload=>{
				if(payload.orderStatus==1||payload.orderStatus==3){
					this.$refs.hkModal.init({
						title:'支付错误',
						cntText:'该课程已下架，无法购买',
						cancle:'',
						confirm:'确认',
						maskClose:true,
						cancleFcn:null,
						confirmFcn:null,
					})
					this.$refs.hkModal.show()
				}else{
					this.$refs.hkModal.init({
						title:'支付错误',
						cntText:'该课程已下架，无法购买，请申请退款',
						cancle:'',
						confirm:'确认',
						maskClose:true,
						cancleFcn:null,
						confirmFcn:null,
					})
					this.$refs.hkModal.show()
				}
				
			})
			uni.$on("showToApp",payload=>{
				this.$refs.hkModal.init({
					title:'支付提示',
					cntText:'此订单需在找培训app内支付',
					cancle:'确认',
					confirm:'下载',
					maskClose:true,
					cancleFcn:null,
					confirmFcn:()=>{
						this.toPage({
							url:'http://s.de123.com/down.html'
						})
					},
				})
				this.$refs.hkModal.show()
			})
			
		},
		// 下拉刷新
		onPullDownRefresh() {
			let _this=this;
			setTimeout(() => {
				_this.getData({
					userId:this.userInfo.userId,
					status:this.orderShow,
					page_no:1,
					page_size:10
				});
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.tabBar {
		height: 90upx;
		border-top: 1px solid #efefef;
		border-bottom: 1px solid #efefef;
		background-color: #FFFFFF;
		box-sizing: border-box;
		display: flex;
		.tabList {
			display: flex;
			// padding: 0 35upx;
			// margin-right: 50upx;
			.tabItem {
				flex-shrink: 0;
				line-height: 85upx;
				font-size: 30rpx;
				color: #202932;
				
				width: 25%;
				text-align: center;
			}

			.active {
				color: #f79f21;
				border-bottom: 3upx solid #ffb423;
			}
		}
	}

	.paymentBox {
		display: flex;
		background-color: #FFFFFF;
		height: 90upx;
		padding: 0 38upx;
		align-items: center;
		.paymentItem {
			font-size: 26rpx;
			color: #8f8f8f;
			background-color: #e7e7e7;
			border-radius: 7rpx;
			padding: 10upx 20upx;
			margin-right: 16upx;
		}
		.active{
			background-color: #8f8bad;
			color: #FFFFFF;
		}
	}
	.remarkInput{
		border: 1px solid #cacaca;
		font-size: 24upx;
		margin-top: 20upx;
		height: 60upx;
		padding: 0 15upx;
	}
	.orderList{
		display: flex;
		flex-direction: column;
		padding: 18upx;
	}
</style>
